<template>
	<view class="personInfo">
		<view class="container-box">
			<view class="flex-box border-bottom-box form-item">
				<view>头像上传：</view>
				<view class="auto-box flex-box end-box">
					<view class="customPhoto">
						<image :src="userInfo.avatar || defaultPhoto" mode="aspectFit"></image>
					</view>
					<view class="arrow-right">
						<image :src="arrowRight" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<view class="flex-box border-bottom-box form-item">
				<view>修改昵称：</view>
				<view class="auto-box flex-box">
					<view class="auto-box">
						{{ userInfo.nickName }}
					</view>
					<view class="arrow-right">
						<image :src="arrowRight" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<view class="flex-box border-bottom-box form-item">
				<view>绑定手机号：</view>
				<view class="auto-box flex-box">
					<view class="auto-box">
						<view>{{ userInfo.phoneNum }}</view>
					</view>
					<view class="arrow-right">
						<image :src="arrowRight" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
	<uni-popup ref="inputDialog" type="dialog">
		<uni-popup-dialog ref="inputClose" mode="input" title="修改昵称" :value="userInfo.nickname" placeholder="请输入内容" @confirm="dialogInputConfirm"></uni-popup-dialog>
	</uni-popup>
</template>

<script setup>
import { ref, computed } from 'vue';
import defaultPhoto from '@/asstes/images/mine/default-photo.png';
import arrowRight from '@/asstes/images/mine/arrowRightIcon.png';
import { uniGetStorageSync } from '@/utils/index.js';
// 用户信息
const userInfo = computed(() => {
	return uniGetStorageSync('auth') || {};
});
const inputDialog = ref(null);
/**
 * @description 更新头像
 */
function handleUpdate() {
	uni.chooseImage({
		count: 6, //默认9
		sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
		success(res) {
			console.log(JSON.stringify(res.tempFilePaths));
		}
	});
}
/**
 * @description 修改昵称
 */
function handleUpdateNickName() {
	inputDialog.value?.open();
}
/**
 * @param {string} e
 * @description 修改昵称
 */
function dialogInputConfirm(e) {
	userInfo.value.nickname = e;
}
/**
 * @description 修改手机号
 */
function handleUpdateMobile() {
	uni.navigateTo({
		url: '/pages/mine/updateTel'
	});
}
</script>

<style lang="scss" scoped>
.personInfo {
	background-color: #fff;
	height: 100%;

	.form-item {
		padding: 20rpx 0;
		font-size: 26rpx;
		color: #000;
		text-align: right;
	}

	.auto-box {
		flex: 1;
	}

	.placeholder-box {
		color: rgba(144, 144, 144);
		font-size: 24rpx;
	}

	.container-box {
		padding: 32rpx;
		background-color: #fff;
		overflow: hidden;
	}

	.customPhoto {
		width: 132rpx;
		height: 132rpx;
		border-radius: 50%;
		overflow: hidden;
		image {
			width: 100%;
			height: 100%;
			display: block;
		}
	}

	.arrow-right {
		width: 17rpx;
		height: 30rpx;
		margin-left: 24rpx;

		image {
			width: 100%;
			height: 100%;
			display: block;
		}
	}

	.custom-popup-box {
		padding-top: 24rpx;
	}
}
</style>
<style lang="scss">
:deep(.uni-popup__info) {
	color: #000 !important;
}
</style>
